<template>
  <content-box>
    <div slot="body" style="padding: 15px;">
      <div class="btn-tools">
        <el-button-group class="btns">
          <el-button v-if="tabOnIndex == 'addModuleList'" @click="addModuleVisible = true" size="mini" type="primary">
            <i class="el-icon-plus"></i> {{$t('btns.add') + $t('btns.module')}}
          </el-button>
        </el-button-group>
      </div>
      <el-tabs @tab-click="selectTab" :value="tabOnIndex">

        <el-tab-pane name="addModuleList" v-loading="loading">
          <span slot="label">
            <svg-icon icon-class="moduleAdd" /> {{$t('btns.add') + $t('btns.module')}}
          </span>

          <el-table :data="tableData" border style="width: 100%" size="mini">
            <el-table-column type="index" align="center"></el-table-column>

            <el-table-column prop="module_title" label="显示名称" align="center"></el-table-column>
            
            <el-table-column prop="modulename" label="模块名称" align="center"></el-table-column>

            <el-table-column prop="install" label="模块状态" align="center">
              <template slot-scope="scope">
                <el-tag type="success" close-transition v-if="scope.row.install === 1">已安装</el-tag>
                <el-tag type="warning" close-transition v-else>未安装</el-tag>
              </template>
            </el-table-column>


            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="info" plain @click="handleClick(scope.row)" v-if="scope.row.install === 1">
                  卸载
                </el-button>
                <el-button size="mini" type="warning" plain @click="handleClick(scope.row)" v-else>安装</el-button>
                
                <el-button size="mini" type="primary" @click="handleClick(scope.row)" >导出</el-button>
                <el-button size="mini" type="danger" >删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>

        <el-tab-pane name="moduleList">
          <span slot="label">
            <svg-icon icon-class="component" /> 模块列表
          </span>

          <el-table :data="tableData" border style="width: 100%" size="mini" v-loading="loading">
            <el-table-column type="index" align="center"></el-table-column>

            <el-table-column prop="module_title" label="显示名称" align="center"></el-table-column>
            
            <el-table-column prop="modulename" label="模块名称" align="center"></el-table-column>

            <el-table-column label="操作" width="160px" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleClick(scope.row)" >编辑</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 新增模块弹窗 -->
      <el-dialog class="dialog-dark-skin module-form" :title="$t('btns.add') + $t('btns.module')" 
      :visible.sync="addModuleVisible" :append-to-body="true" width="500px">
        <el-form :model="moduleForm" ref="moduleForm" :rules="rules" label-width="78px" class="demo-moduleForm" size="mini">

            <el-row :gutter="20">      
              <el-col :span="12">
                <el-form-item label="显示名称" prop="module_title">
                  <el-input v-model="moduleForm.module_title" placeholder=""></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="英文名称" prop="modulename">
                  <el-input xxx='xxx' v-model="moduleForm.modulename"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">      
              <el-col :span="12">
                <el-form-item label="模块类型" prop="type">
                  <el-select v-model="moduleForm.type" placeholder="请选择模块类型">
                    <el-option key="0" label="默认模块" value="0"></el-option>
                    <el-option key="1" label="自定义模块" value="1"></el-option>
                    <el-option key="2" label="系统配置" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="显示顺序" prop="sort">
                  <el-input-number style="width:100%;" :min="0" v-model="moduleForm.sort"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" v-if="moduleForm.type != 2">      
              <el-col :span="6">
                <el-form-item label="审批功能" prop="approve">
                  <el-switch v-model="moduleForm.approve" active-color="#13ce66"></el-switch>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="导入导出" prop="importexport">
                  <el-switch v-model="moduleForm.importexport" active-color="#13ce66"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="addModuleVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="submitModule('moduleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </content-box>
</template>

<script>
import ContentBox from '@/views/layout/components/ContentBox'
import { getModuleList } from '@/api/module'
import { myValidate } from '@/utils/validate'

export default {
  components: {
    ContentBox
  },
  data() {
    return {
      tabOnIndex: 'addModuleList',
      tableData: [],
      loading: false,
      // 新增模块
      addModuleVisible: false,
      moduleForm: {
        modulename: '',
        module_title: '',
        sort: '',
        type: 1,
        approve: false,
        importexport: false
      },
      rules: {
        modulename: [
          { required: true, message: this.$t('btns.add'), trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
          { validator: myValidate, rule: 'rangelength:[5,10]', label: '模块英文名称', trigger: 'blur' }
        ],
        module_title: [
          { required: true, message: '请输入模块显示名称', trigger: 'blur' }
        ]
      }
    }
  },

  watch: {
    tabOnIndex(e, v) {
      console.log(e, v)
    }
  },

  methods: {
    selectTab(e) {
      this.tabOnIndex = e.name
      this.load()
    },
    // 提交表单
    submitModule(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 加载
    load() {
      this.loading = true
      const type = this.tabOnIndex === 'addModuleList' ? 1 : 0
      getModuleList({ type: type }).then(res => {
        this.tableData = []
        this.tableData = res.data
        this.loading = false
      })
    }
  },

  // 初始化数据
  created() {
    this.load()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 新增按钮
.btn-tools{
  position: relative;
  .btns{
    position: absolute;
    right: 0;
    z-index: 5;
    line-height: 40px;
    padding: 6px 0;
  }
}

.blocks{
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 2px;
  display: block;
  margin: 0 0 15px;
  .title{
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-bottom: 1px solid #ebeef5;
    font-size: 12px;
    color: #333;
  }
  .item{
    margin: 0;
    width: 50%;
    line-height: 30px;
    font-size: 12px;
    display: inline-block;
    padding: 0 0 0 15px;
    color: #666;
    span{
      display: none;
      &:first-child{
        text-indent: 10px;
      }
    }
    &:hover{
      background-color: #ebeef5;
      cursor: pointer;
      span{
        display: inline-block;
        &:hover{
          font-size: 14px;
          color: red;
        }
      }
    }
  }
}
</style>
